<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>我的</title>
</head>
<script src="font/iconfont.js"></script>
<style>
        body{
            background-color: rgb(242, 242, 242);
        }
        h2,p,ul,body{
            padding: 0;
            margin: 0;
        }
        .title{
            list-style: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            background-color: #fff;
            z-index: 9;
        }
        .title h2{
            font-size: 20px;
            text-align: center;
            padding-bottom: 10px;
            padding-top: 10px;
        }
        .bg{
            width: 100%;
            background-color: rgb(242, 242, 242);
            margin-top:  20px;
            padding-top: 35px;
        }
        .bg a{
            text-decoration: none;
            color: #000;
        }
        .on{
            margin-left: 2%;
            background-color: #fff;
            width: 96%;
            display: flex;
            height: 90px;
            border-radius: 10px;
            align-items: center;
            margin-bottom: 2%;
        }
        .on img{
            width: 60px;
            height: 60px;
            margin-left: 20px;
            margin-right: 40px;
            border-radius: 100%;
        }
        .text_me{
            position: relative;
            right:25px;
            width: 55%;
            line-height: 10px;
            bottom: 10px;
        }
        .text_me h3{
            font-size: 20px;
            
        }
        .text_me .phone{
            font-size: 15px;
            color: rgb(102, 102, 102);
        }
        .icon_jt{
            width: 25px;
            height: 25px;
        }
        .under{
            width: 96%;
            height: 460px;
            background-color: #fff;
            margin-left: 2%;
            border-radius: 10px;
            margin-bottom: 50px;
        }
        .under li{
            list-style: none;
            display: flex;
            align-items: center;
            border-bottom:1px solid rgb(238, 238, 238);
            height: 65px;
            letter-spacing: 1px;
        }
        #last{
            border: none;
        }
        .icon{
            width: 25px;
            height: 25px;
            padding-left: 15px;
            margin-right: 20px;
        }
        .under p{
            font-size: 15px;
            width: 72%;          
        }
        .banben h3{
            text-align: center;
            color: rgb(148, 148, 148);
            font-size: 15px;
            padding-top: 150px;
            margin-bottom: 50px;
        }
        #navi{
            padding-top: 5px;
            list-style: none;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #fff;
            z-index: 9;
            display: flex;
            border-top: 1px solid rgb(231, 230, 230);
        }
        #navi>li{
            width: 33.3%;
            text-align: center;
        }
        a{
        text-decoration: none;
        color: rgb(102, 102, 102);
        }
        .nav_cg {
            width: 25px;
            height: 25px;
            vertical-align: 10px;
            fill: currentColor;
            overflow: hidden; 
        }
        #navi p{
            font-size: 10px;
            margin-top: -15px;     
        }
        .nav_cg:active{
            color: rgb(69, 66, 205);
        }
        #nowspan{
            color: rgb(102, 102, 102);
            margin-left: 27%;            
        }
</style>
<body onLoad="getnow()">
    <div class="title">
        <h2>我的</h2>
    </div>
    <div class="bg">
        <ul class="jlist"></ul>
        <div class="under">
            <a href="#">
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hongbao"></use>
                    </svg>
                    <p>平台红包</p>
                    <svg class="icon_jt" aria-hidden="true">
                        <use xlink:href="#icon-jiantou"></use>
                    </svg>
                </li>
            </a>
            <a href="#">
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-piaoju"></use>
                    </svg>
                    <p>商家优惠券</p>
                    <svg class="icon_jt" aria-hidden="true">
                        <use xlink:href="#icon-jiantou"></use>
                    </svg>
                </li>
            </a>
            <a href="#">
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-piaofang"></use>
                    </svg>
                    <p>店铺小票</p>
                    <svg class="icon_jt" aria-hidden="true">
                        <use xlink:href="#icon-jiantou"></use>
                    </svg>
                </li>
            </a>
            <a href="#">
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanhuan"></use>
                    </svg>
                    <p>兑换码</p>
                    <svg class="icon_jt" aria-hidden="true">
                        <use xlink:href="#icon-jiantou"></use>
                    </svg>
                </li>
            </a>
            <a href="#">
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                    </svg>
                    <p>客服中心</p>
                    <svg class="icon_jt" aria-hidden="true">
                        <use xlink:href="#icon-jiantou"></use>
                    </svg>
                </li>
            </a>
            <a href="#">
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanyu"></use>
                    </svg>
                    <p>关于我们</p>
                    <svg class="icon_jt" aria-hidden="true">
                        <use xlink:href="#icon-jiantou"></use>
                    </svg>
                </li>
            </a>
            <a href="#">
                <li id="last">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    <p>设置</p>
                    <svg class="icon_jt" aria-hidden="true">
                        <use xlink:href="#icon-jiantou"></use>
                    </svg>
                </li>
            </a> 
        </div>
        <span id="nowspan"></span>
        <div class="banben">
            <h3>版本号V2.2.0</h3>
        </div>
    </div>
    <ul id="navi">
        <li>
            <a href="./U1-index.html">
                <svg class="nav_cg" aria-hidden="true">
                    <use xlink:href="#icon-shouye"></use>
                </svg>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="./U2.html">
                <svg class="nav_cg" aria-hidden="true">
                    <use xlink:href="#icon-biaoqian"></use>
                </svg>
                <p>订单</p>
            </a>
        </li>
        <li>
            <a href="#">
                <svg class="nav_cg" aria-hidden="true">
                    <use xlink:href="#icon-smile-full"></use>
                </svg>
                <p>我的</p>
            </a>
        </li>
    </ul>

    <script>
        var json=[{
            img:"./ad/touxiang.jpg",
            name:"成风",
            phone:"Wind",
        }];

        var jlist=document.querySelector(".jlist");

        json.forEach(function(v,i){
            var nli=document.createElement("li");
            nli.innerHTML=`        <a href="./U4.html">
            <div class="on">
                <img src="${v.img}">
                <div class="text_me">
                    <h3>${v.name}</h3>
                    <span class="phone">手机号：${v.phone}</span>
                </div>
                <svg class="icon_jt" aria-hidden="true">
                    <use xlink:href="#icon-jiantou"></use>
                </svg>
            </div>
        </a>`;
            jlist.appendChild(nli);
        });
    </script>

<script type="text/javascript">
    function getnow(){undefined
           //1、获得当前时间，格式化时间
           var now=new Date(); 
           var year=now.getFullYear(); 
           var month=now.getMonth()+1;
           if(month<10){undefined
              month="0"+month;
           }  
           var date=now.getDate();
           if(date<10){undefined
              date="0"+date;
           }
          var hour=now.getHours();
           if(hour<10){undefined
              hour="0"+hour;
           }
          var minute=now.getMinutes();
           if(minute<10){undefined
              minute="0"+minute;
           } 
           var second=now.getSeconds();
            if(second<10){undefined
              second="0"+second;
           }
           var nowstr=year+"年"+month+"月"+date+"日  "+hour+":"+minute+":"+second;
           //alert(nowstr);
           //2、显示时间 html
           //获得标签对象
           var nowspan=document.getElementById("nowspan");
           nowspan.innerHTML=nowstr;
           //3、使时间动起来
           setTimeout("getnow()", 1000);
}
</script>
</body>
</html>